<template>
  <el-space fill style="width: 100%">
    <el-card>
      <template #header> 响应式props支持解构 </template>
      <User :user="user" :isActive="isUserActive"></User>
    </el-card>
  </el-space>
</template>

<script setup name="property">
import User from './components/user.vue'
import { ref } from 'vue'

// props 支持解构
const user = ref({
  name: '张三',
  age: 18
})
const isUserActive = ref(true)
setTimeout(() => {
  ;(user.value.name = 'Tom'), (user.value.age = 20)
  isUserActive.value = false
}, 3000)
</script>

<style lang="scss" scoped></style>
